<template>
    <div class="flex justify-between" style="width: 500px; padding: 20px;" >
      <nested-draggable v-model="list" class="w-full"></nested-draggable>
      <preview-list :list="list" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import NestedDraggable from './NestedComponent.vue'
  
  const list = ref([
    {
      name: '文科',
      children: [
        {
          name: '语文',
        },
        {
          name: '政治',
        },
        {
          name: '诗文',
        },
        {
          name: '历史',
        },
        {
          name: '英语',
        },
        {
          name: '地理',
        },
        
      ]
    },
    {
      name: '理科',
      children: [
        {
          name: '数学',
        },
        {
          name: '物理',
        },
        {
          name: '化学',
        },
        {
          name: '代数',
        },
        
      ]
    },
    {
      name: '副科',
      children: [
        {
          name: '计算机',
        },
        {
          name: '美术',
        },
        {
          name: '音乐',
        },
        {
          name: '体育',
        },

      
      ]
    }
  ])
  </script>
  